<template>
  <!-- 搜索栏 -->
  <div>
    <el-date-picker flex v-model="appObject.search.startTime" type="month" format="YYYY-MM" value-format="YYYY-MM" placeholder="选择WG开始时间" />
    <el-date-picker flex v-model="appObject.search.endTime" type="month" format="YYYY-MM" value-format="YYYY-MM" placeholder="选择WG结束时间" />
    <el-input v-model="appObject.search.creator" clearable placeholder="请输入创建者" style="width: 200px; margin-left: 20px" />
    <el-input v-model="appObject.search.wgName" clearable placeholder="请输入WG名称" style="width: 200px; margin-left: 20px" />
    <el-switch v-model="appObject.search.focus" @click="getAllWGList()" style="margin-left: 20px" active-text="关注" inactive-text="未关注"/>
    <el-button type="primary" style="margin-left: 20px" @click="getAllWGList()">搜索</el-button>
  </div>
  <div style="margin-top: 20px;" v-loading="appObject.loading">
    <el-card class="box-card" v-for="(item, index) in appObject.cardList" style="margin-bottom: 10px;">
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="4"><span>
            <el-button link @click="goToWG(item.id, item.creatorId)">{{item.name}}</el-button>
            </span></el-col>
            <el-col :span="4">
              <el-tag class="ml-2" type="info">{{item.creatorName}}</el-tag>
            </el-col>
            <el-col :span="4">
              <el-tag class="ml-2" type="success" v-if="item.startTime">{{item.startTime}}</el-tag>
            </el-col>
            <el-col :span="6">
              <el-tag class="ml-2" type="danger" v-if="item.endTime">{{item.endTime}}</el-tag>
            </el-col>
            <el-col :span="4">
              <el-button icon="Star" :type="checkIsFocus(item) ? 'warning' : 'default'" circle style="margin-right: 10px;"
               @click="focusWG(getUserId, item.id, !checkIsFocus(item), item.name)"/>
            </el-col>
          </el-row>
        </div>
      </template>
      <div class="text item">
        <el-row>
          <el-col :span="18"><span>
            <div style="margin-top: 10px;">{{item.description}}</div>
          </span></el-col>
          <el-col :span="6">
            <el-tag v-if="item.status == 1" type="danger">已完成</el-tag>
            <el-tag v-else-if="checkIsMember(item)">已加入</el-tag>
            <el-tag v-else-if="checkIsApplying(item)" type="warning">申请中</el-tag>
            <el-tag v-else-if="checkIsReject(item)" type="danger">已拒绝</el-tag>
            <el-button v-else-if="!checkIsMember(item)" link @click="showAddApply(item.id)">申请加入</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-pagination small background layout="prev, pager, next" :total="appObject.total" class="mt-4" 
      :page-size="appObject.pagesize" @current-change="handleCurrentChange"/>

  </div>
  <AddApply :callbackFunc="getAllWGList" :key="new Date().getTime()" :currentWgId="appObject.currentWgId"/>
</template>

<script setup>
  import AddApply from './AddApply.vue'
  import { reactive } from 'vue'
  
  import { getAllWG, queryWG, addFocusWG, cancelFocusWg } from '../http/wgApi.js'
  import { getApply } from '../http/applyApi.js'
  import { routeDispatch } from '../http/utils.js'
  
  import userStore from '../store/user.js'
  import applyStore from '../store/apply.js'
  import {storeToRefs} from 'pinia'
  import { ElNotification } from 'element-plus'
  import emitter from '../mitt/index.js'
  
  const aStore = applyStore()
  const uStore = userStore()
  const { user, getUserId } = storeToRefs(uStore)
  
  const appObject = reactive({
    search: {
      startTime: "",
      endTime: "",
      creator: "",
      focus: false,
      wgName: ""
    },
    cardList :[],
    loading: true,
    pagesize: 3,
    currentPagenum: 1,
    total: 0,
    currentWgId: 0,
    applyList: []
  })
  
  const getAllWGList = () => {
    appObject.loading = true
    let focusId = uStore.getUserId
    let focusFlag = appObject.search.focus
    console.log(appObject.search.startTime, appObject.search.endTime)
    queryWG(appObject.search.startTime, appObject.search.endTime, appObject.search.creator, focusId, appObject.pagesize, appObject.currentPagenum, focusFlag, appObject.search.wgName).then(res => {
      res = res.data
      appObject.cardList = res.data.rows
      appObject.total = res.data.total
      appObject.loading = false
    })
  }
  
  getAllWGList()
  
  // 监听wg创建事件，刷新页面
  emitter.on("reloadWg", (info) => {
    getAllWGList(appObject.btnName, uStore.getUserId)
  })
  
  // 分页
  const handleCurrentChange = (val) => {
    appObject.loading = true
    appObject.currentPagenum = val
    getAllWGList()
  }
  
  const focusWG = (userId, wgId, flag, wgName) => {
    if(flag) {
      addFocusWG({
        userId,
        wgId
      }).then(res => {
        getAllWGList()
        ElNotification({
          title: '关注成功',
          message: '您已成功关注WG:' +wgName,
          type: 'success',
        })
      })
      return
    }
    cancelFocusWg({
      userId,
      wgId
    }).then(res => {
      getAllWGList()
      ElNotification({
        title: '取消成功',
        message: '您已成功取消对WG:' +wgName + "的关注",
        type: 'success',
      })
    })
  }
  
  const goToWG = (wgId, creator) => {
    // 根据当前登录人员的类型去不同的页面
    // admin或者任务创建人去管理页面
    // 普通员工去wg展示页面
    if(creator == uStore.getUserId) {
      routeDispatch('/wgAdmin/' + wgId)
    }else {
      routeDispatch('/wgInfo/' + wgId)
    }
  }
  
  const showAddApply = (id) => {
    appObject.currentWgId = id
    aStore.updateShowAddDialog(true)
  }
  
  const checkIsApplying = (wg) => {
    let flag = false
    wg.applysList.forEach(item => {
      if(item.status == 0 && wg.id == item.wgId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsReject = (wg) => {
    let flag = false
    wg.applysList.forEach(item => {
      if(item.status == 2 && wgId == item.wgId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsMember = (wg) => {
    let flag = false
    wg.subtaskList.forEach(task => {
      if(task.assignId == uStore.getUserId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsFocus = (wg) => {
    let flag = false
    wg.focusList.forEach(item => {
      if(item.wgId == wg.id && item.userId == uStore.getUserId) {
        flag = true
      }
    })
    return flag
  }
  
</script>

<style scoped>
  
</style>
